<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<!-- 表单： 采集用户信息，并提交到服务器
		     表单元素：form
		     input控件元素： 采集用户信息的元素
			 必须type类型属性     属性值    text  文本框
			                               password      密文 文本框
										   submit        提交  form表单控制
										   button        按钮 结合JS、value 【html4】
										   reset         重置  form表单控制
										   color         颜色控件
										   datetime-local本地日历控件
										   date           年月日插件
										   time            时间插件
										   week            周插件
										   range            滑块
										   file             上传文件
										   radio             单选框 结合name属性
										   checkbox          复选框
										   checked    默认选择 【单复选框】
										   image              图片按钮 结合src属性
										   hidden             隐藏 结合 JS
		 -->
		<h1>登录页面</h1>
		<form>
			<h4>表单元素： 控件元素</h4>
		账号：<input type="text"> <br><br>
		<input type="text">
		密码：<input type="password"> <br><br>
		<input type="submit" />
		<input type="button" value="自定义按钮" />
		<!-- html5写法 结合JS -->
		<button>触发按钮</button>
		<input type="reset" /> <br><br>
		<input type="color" />
		<input type="datetime-local" />
		<input type="date" />
		<input type="time" />
		<input type="week" />
		<input type="range" />
		<input type="file" /> <br><br>
		男 <input type="radio" name="sex" checked="checked"/>
		女 <input type="radio" name="sex"/>
		<input type="checkbox" />红烧肉
		<input type="checkbox" checked/>佛跳墙
		<input type="checkbox" />小鸡炖蘑菇
		<input type="image" src="img/1.png"/>
		<input type="hidden" />
		<h4>表单元素： 多行文本元素 cols行属性   rows列属性 </h4>
		建议:<textarea cols="20" rows="10"></textarea>
		<h4>表单元素：下拉列表：范围内的数据 </h4>
		<!--层级元素 快捷键：select>option -->
		发车时间:<select>
			<option>00:00--24:00</option>
			<option>00:00--06:00</option>
			<option>06:00--12:00</option>
			<option>12:00--18:00</option>
			<option>18:00--24:00</option>
		          </select>
		<h4>表单元素：细节元素 </h4>
		<!-- 层级元素 快捷键：details>summary+div -->
		<details>
			<summary>征婚启示</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium voluptates consequuntur aut reprehenderit amet autem similique cum provident debitis nesciunt, quidem tenetur quia exercitationem sequi aliquid temporibus cupiditate laudantium? Soluta? Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus voluptatibus odio perspiciatis dolorem aliquid alias pariatur cumque. Soluta necessitatibus eius tempora vero id fugiat numquam incidunt laborum, doloremque ducimus officiis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita quidem pariatur eius ratione necessitatibus cum veniam, quisquam facilis culpa neque iure similique animi fugit deserunt reprehenderit, vitae ipsam accusamus tempore? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur velit, qui iusto temporibus modi iure numquam ducimus ex delectus. Porro quos soluta cupiditate repellendus obcaecati nisi quisquam dicta animi odio. </div>
			</details>
		</form>
		<h1>新元素</h1>
		<!-- 记号笔元素 -->
		周五<mark>放假啦</mark>
		<!-- 度量元素 必须属性 value="0~1默认值" min属性 max属性 -->
		电量:<meter value="80" min="0" max="100"></meter>
	</body>
</html>